<template>
  <div id="root">
    <NavBar>支付订单</NavBar>
    <div class="page-tfour">
      <div id="time">
        <span class="fa fa-clock-o"></span>
        <span>剩余时间：</span>
        <span>{{timeStr}}</span>
      </div>
      <div id="name">
        <p>{{obj.ticket}}</p>
        <div>
          <span>总计</span>
          <span>￥{{totalPrice}}</span>
        </div>
      </div>
      <div id="order-id">
        <div class="item">
          <span>订单号</span>
          <span>{{obj.ordernum}}</span>
        </div>
        <div class="item">
          <span>出行日期</span>
          <span>{{obj.date}}</span>
        </div>
      </div>
      <div id="pay">
        <span>需在线支付</span>
        <span>￥{{totalPrice}}</span>
      </div>

      <div class="way" @touchstart="show=true">
        <div>
          <img src="/static/img/logo/wx.png">
          <span>微信支付</span>
        </div>
        <img src="/static/img/logo/gou.png" v-show="show">
      </div>
      <div class="way" @touchstart="show=false">
        <div>
          <img src="/static/img/logo/zfb1.png">
          <span>支付宝支付</span>
        </div>
        <img src="/static/img/logo/gou.png" v-show="!show">
      </div>

      <div id="bar">
        <div>
          <span>总额：</span>
          <span>￥{{totalPrice}}</span>
        </div>
        <router-link to="/my/viewlist/detail/order/code">
          <button>立即支付</button>
        </router-link>
      </div>


    </div>
  </div>
</template>

<script>
import NavBar from '../components/NavBar.vue';
import {mapState} from "vuex";

export default {
  data:function(){
    return {
      obj:{},
      show:true,
      timeStr:"",
      second:3600,
      timer:""
    }
  },
  components:{
    NavBar,
  },
  computed:{
    ...mapState([
      "userintro",
    ]),
    totalPrice:function(){
      return this.obj.price*this.obj.count;
    }
  },
  methods:{
    time:function(val){
    var min = Math.floor(val/60);
    var s = val-min*60;
    min = min<10?"0"+min:min;
    s = s<10?"0"+s:s;
    var str = min+"分"+s+"秒";
    this.timeStr = str;
    },
    bb:function(){
      this.timer = setInterval(()=>{
        if(this.second>0){
          this.second--;
        };
        this.time(this.second);
      },1000);
    },

  },
  mounted:function(){
    this.$store.dispatch("requestLoginIntro");
    // 支付页面从本地（localStorage）中取出数据后，要parse一下。
    var piaoming = JSON.parse(localStorage.getItem("piaoming"));
    var num = JSON.parse(localStorage.getItem("num")); 
    var param = {
      user:this.userintro._id,
      ticket:piaoming,
      ordernum:num
    };
    this.http.post("/api/users/pay",param)
    .then(res=>{
        this.obj = res.data.msg;
    });
    this.bb();
  },
  destroyed:function(){
    clearInterval(this.timer);
  },

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #root{
    width:100vw;
  }
  #time{
     font-size:12px;
     color: #ff6f6d;
     padding:8px 15px;
     border:1px solid #dedede;
     background-color:white;
  }
  #name{
    background-color:white;
    margin-top:15px;
    border:solid 1px #dedede;
    padding:6px 15px;
  }
  #name p{
    margin:0;
    color:#666;
    font-size:15px;
  }
  #name div span:nth-of-type(1){
    font-size: 12px;
    color: #9b9b9b;
  }
  #name div span:nth-of-type(2){
    color: #ff6f6d;
    font-size:13px;
  }
  #order-id{
    background-color:white;
    border-bottom:1px solid #dedede;
    padding:6px 15px;
  }
  .item span:nth-of-type(1){
    font-size:11px;
    color:#666;
  }
  .item span:nth-of-type(2){
    font-size:12px;
    color:#9b9b9b;
  }
  #pay{
    display:flex;
    justify-content:space-between;
    background-color:white;
    margin-top:15px;
    border:solid 1px #dedede;
    padding:5px 15px;
    align-items:center;
  }
  #pay span:nth-of-type(1){
    font-size:12px;
    color:#9b9b9b;
  }
  #pay span:nth-of-type(2){
    font-size:12px;
    color:#ff6f6d;
  }
  .way{
    display:flex;
    justify-content:space-between;
    padding:8px 15px;
    align-items:center;
    border-bottom:solid 1px #dedede;
  }
  .way div{
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .way div img{
    width: 22px;
    height: 22px;
  }
  .way div span{
    font-size:12px;
    color:#666;
    margin-left:6px;
  }
  .way>img{
    width: 19px;
    height: 19px;
  }
  #bar{
    height:41px;
    border-top:1px solid #dedede;
    display:flex;
    justify-content:space-between;
    box-shadow: 0 -3px 15px -2px rgba(0, 0, 0, 0.06);
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    background: #fff;
  }
  #bar div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-left:10px;
  }
  #bar div span:nth-of-type(1){
    font-size: 12px;
    color: #666;
  }
  #bar div span:nth-of-type(2){
    font-size: 18px;
    color: #ff6f6d;
  }
  #bar button{
    border:none;
    width: 110px;
    height: 40px;
    font-size: 16px;
    line-height: 40px;
    color: #fff;
    text-align: center;
    background-color:#f34b4a;
  }
</style>
